<template>
  <div class="warning-delays">
    <je-form-item
      :label-col="{ span: 7 }"
      :label="$t('WarningDelays.postpone')"
      style="margin-top: 16px; padding-right: 16px"
      name="enable"
    >
      <je-switch v-model:value="formState.enable" mode="checkbox" />
      <span class="prompt">{{ $t('WarningDelays.postponeContext') }}</span>
    </je-form-item>
    <je-form-item
      :label-col="{ span: 7 }"
      style="padding-right: 16px"
      name="processingTimeLimitDuration"
    >
      <template #label>
        <i
          class="conditionicon fas fa-question-circle"
          @click="clickIcon('processingTimeLimitDuration')"
        />
        {{ $t('WarningDelays.processLimited') }}
      </template>
      <je-row :gutter="[16, 16]">
        <je-col :span="8" style="padding-right: 0">
          <je-input-number
            v-model:value="formState.processingTimeLimitDuration"
            class="warning-delays-input-number"
            min="1"
            style="width: 100%; border-right: 0"
            @change="doChange('processingTimeLimitDuration')"
          />
        </je-col>
        <je-col :span="16" style="padding-left: 0px">
          <je-select
            v-model:value="formState.processingTimeLimitUnitCode"
            :model="formState"
            config-info="JE_WF_LCTXSJLX,processingTimeLimitUnitCode~processingTimeLimitUnitName,code~text,S"
          />
        </je-col>
      </je-row>
    </je-form-item>
    <je-grid
      ref="grid"
      border
      auto-resize
      show-overflow="ellipsis"
      keep-source
      show-header-overflow
      resizable
      class="warning-delays-grid"
      height="160"
      size="mini"
      header-align="center"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showStatus: true,
        showInsertStatus: false,
      }"
      :store="gridStore"
    >
      <je-column width="40" align="center">
        <template #header>
          <i style="font-size: 16px; cursor: pointer" class="fal fa-plus" @click="addColumn"></i>
        </template>
        <template #default="{ row }">
          <i
            style="font-size: 16px; cursor: pointer"
            class="fal fa-times"
            @click="deleteColumn(row)"
          ></i>
        </template>
      </je-column>
      <je-column
        field="name"
        :title="$t('WarningDelays.executionType')"
        :edit-render="inputRender"
        width="140"
      >
        <template #edit="{ row }">
          <je-select
            v-model:value="row.type"
            :get-popup-container="getPopupContainer"
            config-info="JE_CORE_WORKFLOW_WARNING_TYPE,name~type,text~code,S"
          />
        </template>
      </je-column>
      <je-column
        field="serviceName"
        :title="$t('WarningDelays.mannerFn')"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-input
            v-if="row.type == 'executeCustomMethod'"
            v-model:value.trim="row.serviceName"
            readonly
            @change="clearData(row)"
          >
            <template #suffix>
              <i style="cursor: pointer" class="fas fa-list-ul" @click="handlerModal(row)"></i>
            </template>
          </je-input>
          <span v-else style="color: #bfbfbf; margin: 0 10px">无需配置</span>
        </template>
        <template #default="{ row }">
          <sapn v-if="row.type == 'executeCustomMethod'">{{ row.serviceName }}</sapn>
          <span v-else style="color: #bfbfbf">无需配置</span>
        </template>
      </je-column>
    </je-grid>
    <je-form-item
      style="margin-top: 10px; padding-right: 16px"
      :label-col="{ span: 7 }"
      name="warningTimeLimitDuration"
    >
      <template #label>
        <i
          class="conditionicon fas fa-question-circle"
          @click="clickIcon('warningTimeLimitDuration')"
        />
        {{ $t('WarningDelays.warningLimited') }}
      </template>
      <je-row :gutter="[16, 16]">
        <je-col :span="8" style="padding-right: 0">
          <je-input-number
            v-model:value="formState.warningTimeLimitDuration"
            class="warning-delays-input-number"
            min="1"
            style="width: 100%; border-right: 0"
            @change="doChange('warningTimeLimitDuration')"
          />
        </je-col>
        <je-col :span="16" style="padding-left: 0">
          <je-select
            v-model:value="formState.warningTimeLimitUnitCode"
            :model="formState"
            config-info="JE_WF_LCTXSJLX,warningTimeLimitUnitCode~warningTimeLimitUnitName,code~text,S"
          />
        </je-col>
      </je-row>
    </je-form-item>
    <je-form-item
      :label-col="{ span: 7 }"
      style="padding-right: 16px"
      name="reminderFrequencyDuration"
    >
      <template #label>
        <i
          class="conditionicon fas fa-question-circle"
          @click="clickIcon('reminderFrequencyDuration')"
        />
        {{ $t('WarningDelays.reminderFrequency') }}
      </template>
      <je-row :gutter="[16, 16]">
        <je-col :span="8" style="padding-right: 0">
          <je-input-number
            v-model:value="formState.reminderFrequencyDuration"
            class="warning-delays-input-number"
            min="1"
            style="width: 100%; border-right: 0"
            @change="doChange('reminderFrequencyDuration')"
          />
        </je-col>
        <je-col :span="16" style="padding-left: 0">
          <je-select
            v-model:value="formState.reminderFrequencyUnitCode"
            :model="formState"
            config-info="JE_WF_LCTXSJLX,reminderFrequencyUnitCode~reminderFrequencyUnitName,code~text,S"
          >
            <template #addonAfter>次</template>
          </je-select>
        </je-col>
      </je-row>
    </je-form-item>
  </div>
  <ServeConfiguration
    v-if="serveConfiguration"
    :checked-row="checkedRow"
    @setModalType="setModalType"
    @closeModal="closeModal"
  />
  <Explain
    v-if="explainType"
    :modal-context="modalContext"
    width="600px"
    @closEexplain="closEexplain"
  />
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Grid, Select, Input, Form, InputNumber, Data, Switch, Col, Row } from '@jecloud/ui';
  import { isNotEmpty } from '@jecloud/utils';
  import { inputRender } from '@/helper/edit-render';
  import ServeConfiguration from '../select-personnel/modal/serve-configuration.vue';
  import Explain from '@/components/explain/index.vue';

  export default defineComponent({
    name: 'WarningDelays',
    components: {
      JeGrid: Grid,
      JeColumn: Grid.Column,
      JeSelect: Select,
      JeInput: Input,
      JeFormItem: Form.Item,
      JeInputNumber: InputNumber,
      JeSwitch: Switch,
      JeCol: Col,
      JeRow: Row,
      ServeConfiguration,
      Explain,
    },
    props: {
      earlyWarningAndPostponement: {
        type: Object,
        default: () => {
          return {};
        },
      },
      nodeId: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      const grid = ref(null);
      const formState = ref(props.earlyWarningAndPostponement);

      //列表的数据源store
      const gridStore = Data.Store.useGridStore({
        data: props.earlyWarningAndPostponement.resource,
      });

      //监听节点Id变化,给数据重新赋值
      watch(
        () => props.nodeId,
        () => {
          gridStore.loadData(props.earlyWarningAndPostponement.resource);
          formState.value = props.earlyWarningAndPostponement;
        },
        { immediate: true },
      );

      //添加列
      const addColumn = () => {
        const data = {
          type: '',
          name: '',
          serviceName: '',
          methodName: '',
        };
        gridStore.insert(data, -1);
      };

      //删除列
      const deleteColumn = (row) => {
        gridStore.remove(row);
      };

      //监听列表的数据给主数据赋值
      watch(
        () => gridStore.data,
        (newVal) => {
          const datas = [];
          newVal.forEach((item) => {
            if (isNotEmpty(item.name)) {
              datas.push(item);
            }
          });
          formState.value.resource = datas;
        },
        { deep: true },
      );

      const serveConfiguration = ref(false);
      const checkedRow = ref({});
      const handlerModal = (row) => {
        serveConfiguration.value = true;
        checkedRow.value = row;
      };
      const setModalType = ({ data }) => {
        checkedRow.value.serviceName = data.serviceName;
        checkedRow.value.methodName = data.methodName;
        serveConfiguration.value = false;
      };
      const closeModal = () => {
        serveConfiguration.value = false;
      };
      // 清空数据
      const clearData = (row) => {
        row.serviceName = '';
        row.methodName = '';
      };
      // 监听form数据 解决数字框'null'数据
      watch(
        () => formState.value,
        () => {
          for (let fieldKey in formState.value) {
            const val = formState.value[fieldKey];
            if (!val) {
              formState.value[fieldKey] = '';
            }
          }
        },
        { deep: true },
      );

      //点击icon 弹出提示框
      const modalContext = ref('');
      const explainType = ref(false);
      const clickIcon = (type) => {
        if (type == 'processingTimeLimitDuration') {
          modalContext.value =
            '流程流转到本节点，等待时间到达设置的时限后，将自动按下方逻辑规则处理。';
        } else if (type == 'warningTimeLimitDuration') {
          modalContext.value = '到达自动处理时限前，按设置的预警时限，提前发送预警通知消息。';
        } else if (type == 'reminderFrequencyDuration') {
          modalContext.value = '在提前预警通知的时间范围内，设置发送通知提醒的频率。';
        }
        explainType.value = true;
      };
      //弹窗关闭回调
      const closEexplain = () => {
        explainType.value = false;
      };
      // 数组框change触发,保留整数
      const doChange = (fieldCode) => {
        if (isNotEmpty(formState.value[fieldCode])) {
          setTimeout(() => {
            formState.value[fieldCode] = parseInt(formState.value[fieldCode]);
          }, 100);
        }
      };

      const getPopupContainer = () => {
        return document.body;
      };

      return {
        gridStore,
        formState,
        addColumn,
        deleteColumn,
        inputRender,
        grid,
        serveConfiguration,
        checkedRow,
        handlerModal,
        setModalType,
        closeModal,
        clearData,
        modalContext,
        explainType,
        clickIcon,
        closEexplain,
        doChange,
        getPopupContainer,
      };
    },
  });
</script>

<style lang="less">
  .warning-delays {
    .warning-delays-grid {
      .vxe-table--render-default .vxe-table--border-line {
        border-left: 0 !important;
      }
    }
  }
</style>
<style lang="less" scoped>
  .warning-delays {
    .warning-delays-input-number.ant-input-number {
      &:hover {
        border-right: 1px solid #5c8dff !important;
      }
    }
    .warning-delays-input-number.ant-input-number.ant-input-number-focused {
      border-right: 1px solid #5c8dff !important;
    }
  }
</style>
